<!DOCTYPE html>
<html >
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		
	    <link href="css/mui.min.css" rel="stylesheet"/>
		<link href="./css/mui.picker.css" rel="stylesheet" />
		<link href="./css/mui.poppicker.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="./css/mui.indexedlist.css"/>
		<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
	</head>
	<style type="text/css">
		.mui-title{
			font-size:20px;
		}
		.xl:after{
			content:'';
			display: block;
			width: 0; 
			height: 0; 
			border-left: 8px solid transparent; 
			border-right: 8px solid transparent; 
			border-top: 10px solid #000; 
		}
		html,body {
				height: 100%;
				overflow: hidden;
			}
		.contact_img{
			width:25px;
			border-radius: 50%;
			margin-right: 10px;
			margin-left: 10px;
			position: relative;
			top:5px
		}
		.contact_ul>.mui-table-view-cell{
			padding: 11px 5px;
		}
	</style>
	<body >
<div id="app">
		<header class="mui-bar mui-bar-nav">
			<a href="javascript:window.close()" class="mui-icon mui-icon mui-icon-back mui-pull-left" style="color:#8a8a8a"></a>
			<h1 id="departmentList" class="mui-title">{{sel_title}} <span class="mui-icon xl"></span></h1>
		</header>
		<div class="mui-content">
			<div id='list' class="mui-indexed-list">
				<div class="mui-indexed-list-search mui-input-row mui-search">
					<input type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索机场">
				</div>
				<div class="mui-indexed-list-bar">
					<a>A</a>
					<a>B</a>
					<a>C</a>
					<a>D</a>
					<a>E</a>
					<a>F</a>
					<a>G</a>
					<a>H</a>
					<a>I</a>
					<a>J</a>
					<a>K</a>
					<a>L</a>
					<a>M</a>
					<a>N</a>
					<a>O</a>
					<a>P</a>
					<a>Q</a>
					<a>R</a>
					<a>S</a>
					<a>T</a>
					<a>U</a>
					<a>V</a>
					<a>W</a>
					<a>X</a>
					<a>Y</a>
					<a>Z</a>
				</div>
				<div class="mui-indexed-list-alert"></div>
				<div class="mui-indexed-list-inner">
					<div class="mui-indexed-list-empty-alert">没有数据</div>
					<ul class="mui-table-view contact_ul">
						<li data-group="A" class="mui-table-view-divider mui-indexed-list-group">A</li>
						<li data-value="MFM" data-tags="AoMenGuoJi" class="mui-table-view-cell mui-indexed-list-item">
							<img src="images/qq.png" alt=""  class="contact_img"/>澳门国际机场
						</li>
						<li data-group="B" class="mui-table-view-divider mui-indexed-list-group">B</li>
						<li data-value="PEK" data-tags="BeiJingShouDuGuoJi" class="mui-table-view-cell mui-indexed-list-item">北京首都国际机场</li>
						<li data-group="C" class="mui-table-view-divider mui-indexed-list-group">C</li>
						<li data-value="CIF" data-tags="ChiFeng" class="mui-table-view-cell mui-indexed-list-item">赤峰机场</li>
						<li data-group="D" class="mui-table-view-divider mui-indexed-list-group">D</li>
						<li data-value="DNH" data-tags="DunHuang" class="mui-table-view-cell mui-indexed-list-item">敦煌机场</li>
						<li data-group="E" class="mui-table-view-divider mui-indexed-list-group">E</li>
						<li data-value="DSN" data-tags="EErDuoSi" class="mui-table-view-cell mui-indexed-list-item">鄂尔多斯机场</li>
						<li data-group="F" class="mui-table-view-divider mui-indexed-list-group">F</li>
						<li data-value="FUG" data-tags="FuYangXiGuan" class="mui-table-view-cell mui-indexed-list-item">阜阳西关机场</li>
						<li data-group="G" class="mui-table-view-divider mui-indexed-list-group">G</li>
						<li data-value="KOW" data-tags="GanZhouHuangJin" class="mui-table-view-cell mui-indexed-list-item">赣州黄金机场</li>
						<li data-group="H" class="mui-table-view-divider mui-indexed-list-group">H</li>
						<li data-value="HRB" data-tags="HaErBinTaiPingGuoJi" class="mui-table-view-cell mui-indexed-list-item">哈尔滨太平国际机场</li>
						<li data-group="J" class="mui-table-view-divider mui-indexed-list-group">J</li>
						<li data-value="TNA" data-tags="JiNanYaoQiangGuoJi" class="mui-table-view-cell mui-indexed-list-item">济南遥墙国际机场</li>
						<li data-group="K" class="mui-table-view-divider mui-indexed-list-group">K</li>
						<li data-value="KHG" data-tags="KaShi" class="mui-table-view-cell mui-indexed-list-item">喀什机场</li>
						<li data-group="L" class="mui-table-view-divider mui-indexed-list-group">L</li>
						<li data-value="LXA" data-tags="LaSaGongGa" class="mui-table-view-cell mui-indexed-list-item">拉萨贡嘎机场</li>
						<li data-group="M" class="mui-table-view-divider mui-indexed-list-group">M</li>
						<li data-value="NZH" data-tags="ManZhouLiXiJiao" class="mui-table-view-cell mui-indexed-list-item">满洲里西郊机场</li>
						<li data-group="N" class="mui-table-view-divider mui-indexed-list-group">N</li>
						<li data-value="KHN" data-tags="NanChangChangBeiGuoJi" class="mui-table-view-cell mui-indexed-list-item">南昌昌北国际机场</li>
						<li data-group="P" class="mui-table-view-divider mui-indexed-list-group">P</li>
						<li data-value="SYM" data-tags="PuErSiMao" class="mui-table-view-cell mui-indexed-list-item">普洱思茅机场</li>
						<li data-group="Q" class="mui-table-view-divider mui-indexed-list-group">Q</li>
						<li data-value="NDG" data-tags="QiQiHaErSanJiaZi" class="mui-table-view-cell mui-indexed-list-item">齐齐哈尔三家子机场</li>
						<li data-group="R" class="mui-table-view-divider mui-indexed-list-group">R</li>
						<li data-value="RKZ" data-tags="RiKaZeHePing" class="mui-table-view-cell mui-indexed-list-item">日喀则和平机场</li>
						<li data-group="S" class="mui-table-view-divider mui-indexed-list-group">S</li>
						<li data-value="SYX" data-tags="SanYaFengHuangGuoJi" class="mui-table-view-cell mui-indexed-list-item">三亚凤凰国际机场</li>
						<li data-value="TCG" data-tags="TaCheng" class="mui-table-view-cell mui-indexed-list-item">塔城机场</li>
						<li data-group="W" class="mui-table-view-divider mui-indexed-list-group">W</li>
						<li data-value="WXN" data-tags="WanZhouWuQiao" class="mui-table-view-cell mui-indexed-list-item">万州五桥机场</li>
						<li data-group="X" class="mui-table-view-divider mui-indexed-list-group">X</li>
						<li data-value="XIY" data-tags="XiAnXianYangGuoJi" class="mui-table-view-cell mui-indexed-list-item">西安咸阳国际机场</li>
						<li data-group="Y" class="mui-table-view-divider mui-indexed-list-group">Y</li>
						<li data-value="ENY" data-tags="YanAnErShiLiBao" class="mui-table-view-cell mui-indexed-list-item">延安二十里堡机场</li>
						<li data-group="Z" class="mui-table-view-divider mui-indexed-list-group">Z</li>
						<li data-value="ZNY" data-tags="YanAnErShiLiBao" class="mui-table-view-cell mui-indexed-list-item">延安二十里堡机场</li>
					</ul>
				</div>
			</div>
		</div>
</div>
	</body>
	
	
	
	
	
	
	<script src="./js/mui.min.js"></script>
	<script src="./js/mui.picker.js"></script>
	<script src="./js/mui.poppicker.js"></script>
	<script src="./js/city.data.js" type="text/javascript" charset="utf-8"></script>
	<script src="./js/mui.indexedlist.js" type="text/javascript" charset="utf-8"></script>
	<script>
		(function($, doc) {
			$.init();
			$.ready(function() {
				var cityPicker = new $.PopPicker({
					layer: 2
				});
				cityPicker.setData(cityData);
				var showCityPickerButton = doc.getElementById('departmentList');
				showCityPickerButton.addEventListener('tap', function(event) {
					cityPicker.show(function(items) {
						//console.log("你选择的城市是:" + items[0].text + " " + items[1].text)
						//返回 false 可以阻止选择框的关闭  
						//return false;
						//document.getElementById("departmentList").text=items[0].text + " " + items[1].text
						app.sel_title=items[1].text //得到选择序列后，更新至标题
						//进入更新栏目信息
					});
				}, false)
			});
		})(mui, document);
		
		</script>
		<script type="text/javascript" charset="utf-8">
			mui.init();
			mui.ready(function() {
				var header = document.querySelector('header.mui-bar');
				var list = document.getElementById('list');
				//calc hieght
				list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';
				//create
				window.indexedList = new mui.IndexedList(list);
			});
		</script>
<div id='cityResult' class="ui-alert"></div>
<script>
	var app = new Vue({
		el:"#app",
		data: {
			sel_title:"总部"
		},
		created:function(){
			//console.log(13213)
		}
	})
</script>
</html>
